<template>
    <div class="myContainer">
        <el-row class="myTitleBorderBottom">
            <el-col :span="12" class="myLineHeight_40px">{{title}}</el-col>
            <el-col :span="12" class="myTextAlignRight">
                <!-- <el-button type="primary" class="myBgGreen" @click="onChart">{{buttonText}}</el-button> -->
            </el-col>
        </el-row>
        <el-row class="myMarginTop_10px" :gutter="10">
            <el-col :span="3">
                <template>
                    <el-select
                        v-model="hierarchyValue"
                        @change="changeLevel"
                        placeholder="层级">
                        <el-option
                            v-for="item in hierarchyList"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                </template>
            </el-col>
            <el-col :span="3">
                <template>
                    <el-select
                        v-model="regionValue"
                        multiple
                        collapse-tags
                        class="mySelect"
                        placeholder="区域">
                        <el-option
                            v-for="item in regionList"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                </template>
            </el-col>
            <el-col :span="3">
                <template>
                    <el-select
                        v-model="planValue"
                        filterable
                        placeholder="全部计划">
                        <el-option
                            v-for="item in planList"
                            :key="item.plan_id"
                            :label="item.plan_title"
                            :value="item.plan_id">
                        </el-option>
                    </el-select>
                </template>
            </el-col>
            <el-col :span="3">
                <template>
                    <el-select v-model="typeValue"
                               filterable
                               clearable
                               placeholder="全部考核类型">
                        <el-option
                            v-for="item in typeList"
                            :key="item.type_name"
                            :label="item.type_name"
                            :value="item.type_id">
                        </el-option>
                    </el-select>
                </template>
            </el-col>
            <el-col :span="6">
                <el-date-picker
                    v-model="time"
                    type="daterange"
                    :clearable=false
                    :editable=false
                    align="left"
                    unlink-panels
                    format="yyyy-MM-dd"
                    value-format="yyyy-MM-dd"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    :picker-options="timeOptions">
                </el-date-picker>
            </el-col>
            <el-col :span="3">
                <el-button type="primary" class="myBgGreen" @click="onSearch">查 询</el-button>
            </el-col>
        </el-row>
        <el-row class="myMarginTop_10px">
            <el-col :span="24">
                <template>
                    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
                        <el-tab-pane label="问题汇总" name="first">
                            <el-row>
                                <el-col :span="24">
                                    <el-table
                                        ref="multipleTable"
                                        :data="list1"
                                        :border = true
                                        :stripe = true
                                        v-loading="loading"
                                        style="width: 100%">
                                        <el-table-column type="expand">
                                            <template slot-scope="props">
                                                <el-form label-position="left" inline class="demo-table-expand">
                                                    <el-form-item :label="item.area_name+':'" v-for="item in props.row.record">
                                                        <span>{{ item.occur_num }}</span>
                                                    </el-form-item>
                                                </el-form>
                                            </template>
                                        </el-table-column>
                                        <el-table-column
                                            type="index"
                                            label="序号"
                                            width="60">
                                        </el-table-column>
                                        <el-table-column
                                            prop="type_name"
                                            label="考核类型"
                                            width="150">
                                        </el-table-column>
                                        <el-table-column
                                            prop="st_no"
                                            label="考核标准代码"
                                            width="240">
                                        </el-table-column>
                                        <el-table-column
                                            prop="st_content"
                                            label="考核标准内容">
                                        </el-table-column>
                                        <el-table-column
                                            prop="st_info"
                                            label="考核标准">
                                        </el-table-column>
                                        <el-table-column
                                            prop="count"
                                            label="上报问题总数"
                                            width="120">
                                        </el-table-column>
                                    </el-table>
                                </el-col>
                            </el-row>
                        </el-tab-pane>
                        <el-tab-pane label="共性问题" name="second">
                            <el-row>
                                <el-col :span="24">
                                    <el-table
                                        ref="multipleTable"
                                        :data="list2"
                                        :border = true
                                        :stripe = true
                                        v-loading="loading"
                                        style="width: 100%">
                                        <el-table-column type="expand">
                                            <template slot-scope="props">
                                                <el-form label-position="left" inline class="demo-table-expand">
                                                    <el-form-item :label="item.area_name+':'" v-for="item in props.row.record">
                                                        <span>{{ item.occur_num }}</span>
                                                    </el-form-item>
                                                </el-form>
                                            </template>
                                        </el-table-column>
                                        <el-table-column
                                            type="index"
                                            label="序号"
                                            width="60">
                                        </el-table-column>
                                        <el-table-column
                                            prop="type_name"
                                            label="考核类型"
                                            width="150">
                                        </el-table-column>
                                        <el-table-column
                                            prop="st_no"
                                            label="考核标准代码"
                                            width="240">
                                        </el-table-column>
                                        <el-table-column
                                            prop="st_content"
                                            label="考核标准内容">
                                        </el-table-column>
                                        <el-table-column
                                            prop="st_info"
                                            label="考核标准">
                                        </el-table-column>
                                        <el-table-column
                                            prop="count"
                                            label="上报问题项目数"
                                            width="120">
                                        </el-table-column>
                                    </el-table>
                                </el-col>
                            </el-row>
                        </el-tab-pane>
                        <el-tab-pane label="重复发生问题" name="third">
                            <el-row>
                                <el-col :span="24">
                                    <el-table
                                        ref="multipleTable"
                                        :data="list3"
                                        :border = true
                                        :stripe = true
                                        v-loading="loading"
                                        style="width: 100%">
                                        <el-table-column type="expand">
                                            <template slot-scope="props">
                                                <el-form label-position="left" inline class="demo-table-expand">
                                                    <el-form-item :label="item.area_name+':'" v-for="item in props.row.record">
                                                        <span>{{ item.occur_num }}</span>
                                                    </el-form-item>
                                                </el-form>
                                            </template>
                                        </el-table-column>
                                        <el-table-column
                                            type="index"
                                            label="序号"
                                            width="60">
                                        </el-table-column>
                                        <el-table-column
                                            prop="type_name"
                                            label="考核类型"
                                            width="150">
                                        </el-table-column>
                                        <el-table-column
                                            prop="st_no"
                                            label="考核标准代码"
                                            width="240">
                                        </el-table-column>
                                        <el-table-column
                                            prop="st_content"
                                            label="考核标准内容">
                                        </el-table-column>
                                        <el-table-column
                                            prop="st_info"
                                            label="考核标准">
                                        </el-table-column>
                                        <el-table-column
                                            prop="count"
                                            label="单项目重复次数"
                                            width="120">
                                        </el-table-column>
                                    </el-table>
                                </el-col>
                            </el-row>
                        </el-tab-pane>
                    </el-tabs>
                </template>
            </el-col>
        </el-row>
    </div>
</template>

<style scoped>
    .myContainer{
        background: #fff;
        padding: 10px;
    }
    .myTitleBorderBottom{
        color: #000;
        font-weight: 500;
        font-size: 16px;
        border-bottom: 1px solid #dbdbdb;
        padding-bottom: 5px;
    }
    .myBgGreen{
        background: #00c2a9;
        border-color: #00c2a9;
        color: #fff;
        margin-top:2px;
    }
    .myBgGreen:hover{
        background: #33ceba;
    }
    .myTextAlignRight{
        text-align: right;
    }
    .myLineHeight_40px{
        line-height: 40px;
    }
    .myMarginTop_10px{
        margin-top: 10px;
    }
</style>

<script>
    import { getPlanList , getTypeList , getSum , getCommon , getDuplication } from "@/api/quality";
    import { getLevelArea } from "@/api/area";
    export default {
        data(){
            return{
                title:"整改汇总",
                hierarchyValue:1,
                hierarchyList:[
                    {value:1,label:"集团"},
                    {value:2,label:"片区"},
                    {value:3,label:"小区"},
                ],
                regionValue:[],
                regionList:[],
                planValue:"",
                planList:[],
                typeValue:"",
                typeList:[],
                activeName: 'first',
                list1:[],
                list2:[],
                list3:[],
                loading:false,
                time:[],
                timeOptions: {
                    disabledDate(time) {
                        return time.getTime() > Date.now();
                    },
                    shortcuts: [{
                        text: '最近一周',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 6);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近一个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 29);
                            picker.$emit('pick', [start, end]);
                        }
                    }]
                },
            }
        },
        components: {
        },
        created(){
            document.title=this.title;
            this.time=[this.GMTToStr(new Date(new Date().getTime() - 3600 * 1000 * 24 * 29)),this.GMTToStr(new Date())];
            this.changeLevel(1);//区域
        },
        computed: {
        },
        watch: {
        },
        methods:{
            GMTToStr(time){
                let date = new Date(time)
                let Str=date.getFullYear() + '-' +
                    (date.getMonth() + 1) + '-' +
                    date.getDate()
                //+ ' ' +
                // date.getHours() + ':' +
                // date.getMinutes() + ':' +
                // date.getSeconds()
                return Str
            },
            handleClick(tab, event) {
                let vm=this;
                if(vm.activeName=='first'){
                    vm.ongetSum();
                }else if(vm.activeName=='second'){
                    vm.ongetCommon();
                }else{
                    vm.ongetDuplication();
                }
            },
            changeLevel(val){
                let vm=this;
                let params={
                    level:val
                }
                getLevelArea(params).then(response => {
                    let res=response.data;
                    vm.regionList=res;
                    if(res.length>0){
                        vm.regionValue=[res[0].value];
                    }

                    vm.ongetPlanList();//计划列表

                }).catch(error => {
                    vm.$message.error("执行失败！"+error.response.data.error_msg);
                })
            },
            ongetPlanList(){
                let vm=this;
                let params={
                    page_num:1,
                    page_size:10000
                }
                getPlanList(params).then(response => {
                    let res=response.data;
                    vm.planList=res.rows;
                    vm.planValue=res.rows[0].plan_id||'';

                    vm.ongetTypeList();

                }).catch(error => {
                    vm.$message.error("执行失败！"+error.response.data.error_msg);
                })
            },
            ongetTypeList(){
                let vm=this;
                let params={
                    page_num:1,
                    page_size:10000
                }
                getTypeList(params).then(response => {
                    let res=response.data;
                    vm.typeList=res.rows;

                    vm.ongetSum();

                }).catch(error => {
                    vm.$message.error("执行失败！"+error.response.data.error_msg);
                })
            },
            ongetSum(){
                let vm=this;
                if(vm.regionValue.length==0){
                    vm.$message.info("区域不能为空！");
                    return;
                }
                let params={
                    plan_id:vm.planValue,
                    type_id:vm.typeValue,
                    level:vm.hierarchyValue,
                    region:vm.regionValue.toString(),
                    start_time:vm.time?vm.time[0]:'',
                    end_time:vm.time?vm.time[1]:'',
                }
                vm.loading=true;
                getSum(params).then(response => {
                    let res=response.data;
                    vm.list1=res;
                    vm.loading=false;
                }).catch(error => {
                    vm.loading=false;
                    vm.$message.error("执行失败！"+error.response.data.error_msg);
                })
            },
            ongetCommon(){
                let vm=this;
                if(vm.regionValue.length==0){
                    vm.$message.info("区域不能为空！");
                    return;
                }
                let params={
                    plan_id:vm.planValue,
                    type_id:vm.typeValue,
                    level:vm.hierarchyValue,
                    region:vm.regionValue.toString(),
                    start_time:vm.time?vm.time[0]:'',
                    end_time:vm.time?vm.time[1]:'',
                }
                vm.loading=true;
                getCommon(params).then(response => {
                    let res=response.data;
                    vm.list2=res;
                    vm.loading=false;
                }).catch(error => {
                    vm.loading=false;
                    vm.$message.error("执行失败！"+error.response.data.error_msg);
                })
            },
            ongetDuplication(){
                let vm=this;
                if(vm.regionValue.length==0){
                    vm.$message.info("区域不能为空！");
                    return;
                }
                let params={
                    plan_id:vm.planValue,
                    type_id:vm.typeValue,
                    level:vm.hierarchyValue,
                    region:vm.regionValue.toString(),
                    start_time:vm.time?vm.time[0]:'',
                    end_time:vm.time?vm.time[1]:'',
                }
                vm.loading=true;
                getDuplication(params).then(response => {
                    let res=response.data;
                    vm.list3=res;
                    vm.loading=false;
                }).catch(error => {
                    vm.loading=false;
                    vm.$message.error("执行失败！"+error.response.data.error_msg);
                })
            },
            onSearch(){
                let vm=this;
                if(vm.activeName=='first'){
                    vm.ongetSum();
                }else if(vm.activeName=='second'){
                    vm.ongetCommon();
                }else{
                    vm.ongetDuplication();
                }
            },

        }
    }
</script>

